﻿@page "/components/tooltip"

<LayoutContent AnchorItems="@(new[]{"基本用法","带箭头的文字提示","不带箭头的文字提示","带主题色的文字提示","不同的触发方式","API"})">
<PageHeader Title="Tooltip 文字提示">
    用于文字提示的气泡框。
</PageHeader>

    <Example Title="基本用法">
        <RunContent>
            <TSpace Vertical>
                <TSpaceItem>
                    <TSpace>
                        <TSpaceItem>
                            <TTooltip Content="弹出层的内容" Arrow Placement="PopupPlacement.TopStart">
                                <TButton>上左</TButton>
                            </TTooltip>
                        </TSpaceItem>
                        <TSpaceItem>
                            <TTooltip Content="弹出层的内容" Arrow Placement="PopupPlacement.Top">
                                <TButton>上</TButton>
                            </TTooltip>
                        </TSpaceItem>
                        <TSpaceItem>
                            <TTooltip Content="弹出层的内容" Arrow Placement="PopupPlacement.TopEnd">
                                <TButton>上右</TButton>
                            </TTooltip>
                        </TSpaceItem>
                    </TSpace>
                </TSpaceItem>
                <TSpaceItem>
                    <TSpace Vertical>
                        <TSpaceItem>
                            <TTooltip Content="弹出层的内容" Arrow Placement="PopupPlacement.LeftStart">
                                <TButton>左上</TButton>
                            </TTooltip>
                        </TSpaceItem>
                        <TSpaceItem>
                            <TTooltip Content="弹出层的内容" Arrow Placement="PopupPlacement.Left">
                                <TButton>左</TButton>
                            </TTooltip>
                        </TSpaceItem>
                        <TSpaceItem>
                            <TTooltip Content="弹出层的内容" Arrow Placement="PopupPlacement.LeftEnd">
                                <TButton>左下</TButton>
                            </TTooltip>
                        </TSpaceItem>
                    </TSpace>
                    &nbsp;
                    &nbsp;
                    &nbsp;
                    &nbsp;
                    &nbsp;
                    &nbsp;
                    &nbsp;
                    &nbsp;
                    &nbsp;
                    <TSpace Vertical AdditionalStyle="text-align:right">
                        <TSpaceItem>
                            <TTooltip Content="弹出层的内容" Arrow Placement="PopupPlacement.RightStart">
                                <TButton>右上</TButton>
                            </TTooltip>
                        </TSpaceItem>
                        <TSpaceItem>
                            <TTooltip Content="弹出层的内容" Arrow Placement="PopupPlacement.Right">
                                <TButton>右</TButton>
                            </TTooltip>
                        </TSpaceItem>
                        <TSpaceItem>
                            <TTooltip Content="弹出层的内容" Arrow Placement="PopupPlacement.RightEnd">
                                <TButton>右下</TButton>
                            </TTooltip>
                        </TSpaceItem>
                    </TSpace>
                </TSpaceItem>
                <TSpaceItem>
                    <TSpace>
                        <TSpaceItem>
                            <TTooltip Content="弹出层的内容" Arrow Placement="PopupPlacement.BottomStart">
                                <TButton>下左</TButton>
                            </TTooltip>
                        </TSpaceItem>
                        <TSpaceItem>
                            <TTooltip Content="弹出层的内容" Arrow Placement="PopupPlacement.Bottom">
                                <TButton>下</TButton>
                            </TTooltip>
                        </TSpaceItem>
                        <TSpaceItem>
                            <TTooltip Content="弹出层的内容" Arrow Placement="PopupPlacement.BottomEnd">
                                <TButton>下右</TButton>
                            </TTooltip>
                        </TSpaceItem>
                    </TSpace>
                </TSpaceItem>
            </TSpace>
            </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTooltip Content=""弹出层的内容"" Arrow Placement=""PopperPlacement.TopStart"">
        ...
</TTooltip>

<TTooltip Content=""弹出层的内容"" Arrow Placement=""PopperPlacement.Top"">
    ...
</TTooltip>

<TTooltip Content=""弹出层的内容"" Arrow Placement=""PopperPlacement.TopEnd"">
    ...
</TTooltip>

<TTooltip Content=""弹出层的内容"" Arrow Placement=""PopperPlacement.LeftStart"">
    ...
</TTooltip>

<TTooltip Content=""弹出层的内容"" Arrow Placement=""PopperPlacement.Left"">
    ...
</TTooltip>

<TTooltip Content=""弹出层的内容"" Arrow Placement=""PopperPlacement.LeftEnd"">
    ...
</TTooltip>


<TTooltip Content=""弹出层的内容"" Arrow Placement=""PopperPlacement.RightStart"">
    ...
</TTooltip>

<TTooltip Content=""弹出层的内容"" Arrow Placement=""PopperPlacement.Right"">
    ...
</TTooltip>

<TTooltip Content=""弹出层的内容"" Arrow Placement=""PopperPlacement.RightEnd"">
    ...
</TTooltip>


<TTooltip Content=""弹出层的内容"" Arrow Placement=""PopperPlacement.BottomStart"">
    ...
</TTooltip>

<TTooltip Content=""弹出层的内容"" Arrow Placement=""PopperPlacement.Bottom"">
    ...
</TTooltip>

<TTooltip Content=""弹出层的内容"" Arrow Placement=""PopperPlacement.BottomEnd"">
    ...
</TTooltip>
```
")
    </CodeContent>
</Example>
    <Example Title="带箭头的文字提示">
        <Description>带箭头的文字提示有较明确的指向性。常用于有多个需要提示的信息并列放置时，对某个具体信息进行提示。</Description>
    <RunContent>
            <TTooltip Arrow Content="这是自定义的带箭头文字内容">
                <TButton Varient="ButtonVarient.Outline">带箭头的文字提示</TButton>
            </TTooltip>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
<TTooltip Arrow Content=""这是自定义的带箭头文字内容"">
    <TButton Varient=""ButtonVarient.Outline"">带箭头的文字提示</TButton>
</TTooltip>
")
    </CodeContent>
</Example>
    <Example Title="不带箭头的文字提示">
        <Description>不带箭头的文字提示没有明确指向性。常用于不需要针对性提示的场景中。</Description>
    <RunContent>
            <TTooltip Content="这是自定义的不带箭头文字内容">
                <TButton Varient="ButtonVarient.Outline">不带箭头的文字提示</TButton>
            </TTooltip>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
<TTooltip Content=""这是自定义的不带箭头文字内容"">
    <TButton Varient=""ButtonVarient.Outline"">不带箭头的文字提示</TButton>
</TTooltip>
")
    </CodeContent>
</Example>
    <Example Title="带主题色的文字提示">
        <Description>提供浅灰色、蓝色、绿色、红色、黄色主题的文字提示。</Description>
    <RunContent>
            <TSpace>
                <TSpaceItem>
                    <TTooltip Content="文字提示仅展示文本内容">
                        <TButton>Default</TButton>
                    </TTooltip>
                </TSpaceItem>
                <TSpaceItem>
                    <TTooltip Content="文字提示仅展示文本内容" Theme="TooltipTheme.Primary">
                        <TButton Theme="Theme.Primary">Primary</TButton>
                    </TTooltip>
                </TSpaceItem>
                <TSpaceItem>
                    <TTooltip Content="文字提示仅展示文本内容" Theme="TooltipTheme.Warning">
                        <TButton Theme="Theme.Warning">Warning</TButton>
                    </TTooltip>
                </TSpaceItem>
                <TSpaceItem>
                    <TTooltip Content="文字提示仅展示文本内容" Theme="TooltipTheme.Danger">
                        <TButton Theme="Theme.Danger">Danger</TButton>
                    </TTooltip>
                </TSpaceItem>
                <TSpaceItem>
                    <TTooltip Content="文字提示仅展示文本内容" Theme="TooltipTheme.Success">
                        <TButton Theme="Theme.Success">Success</TButton>
                    </TTooltip>
                </TSpaceItem>
                <TSpaceItem>
                    <TTooltip Content="文字提示仅展示文本内容" Theme="TooltipTheme.Light">
                        <TButton Varient="ButtonVarient.Outline">Light</TButton>
                    </TTooltip>
                </TSpaceItem>
            </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TSpace>
    <TSpaceItem>
        <TTooltip Content=""文字提示仅展示文本内容"">
            <TButton>Default</TButton>
        </TTooltip>
    </TSpaceItem>
    <TSpaceItem>
        <TTooltip Content=""文字提示仅展示文本内容"" Theme=""TooltipTheme.Primary"">
            <TButton Theme=""Theme.Primary"">Primary</TButton>
        </TTooltip>
    </TSpaceItem>
    <TSpaceItem>
        <TTooltip Content=""文字提示仅展示文本内容"" Theme=""TooltipTheme.Warning"">
            <TButton Theme=""Theme.Warning"">Warning</TButton>
        </TTooltip>
    </TSpaceItem>
    <TSpaceItem>
        <TTooltip Content=""文字提示仅展示文本内容"" Theme=""TooltipTheme.Danger"">
            <TButton Theme=""Theme.Danger"">Danger</TButton>
        </TTooltip>
    </TSpaceItem>
    <TSpaceItem>
        <TTooltip Content=""文字提示仅展示文本内容"" Theme=""TooltipTheme.Success"">
            <TButton Theme=""Theme.Success"">Success</TButton>
        </TTooltip>
    </TSpaceItem>
    <TSpaceItem>
        <TTooltip Content=""文字提示仅展示文本内容"" Theme=""TooltipTheme.Light"">
            <TButton Varient=""ButtonVarient.Outline"">Light</TButton>
        </TTooltip>
    </TSpaceItem>
</TSpace>
```
")
    </CodeContent>
</Example>
<Example Title="不同的触发方式">
    <Description>
        设置 <code>Trigger</code> 使用不同的方式触发。默认是 <code>Hover</code> 。
    </Description>
    <RunContent>
        <TSpace>
            <TSpaceItem>
                <TTooltip Content="弹出层的内容" Trigger="PopupTrigger.Click">
                    <TButton>点击</TButton>
                </TTooltip>
            </TSpaceItem>
            <TSpaceItem>
                <TTooltip Content="弹出层的内容" Trigger="PopupTrigger.Hover">
                    <TButton>悬浮鼠标</TButton>
                </TTooltip>
            </TSpaceItem>
            <TSpaceItem>
                <TTooltip Content="弹出层的内容" Trigger="PopupTrigger.Focus">
                    <TInputText @bind-Value="Text" />
                </TTooltip>      
            </TSpaceItem>
        </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTooltip Content=""弹出层的内容"" Trigger=""PopupTrigger.Click"">
    <TButton>点击</TButton>
</TTooltip>
  
<TTooltip Content=""弹出层的内容"" Trigger=""PopupTrigger.Hover"">
    <TButton>悬浮鼠标</TButton>
</TTooltip>

<TTooltip Content=""弹出层的内容"" Trigger=""PopupTrigger.Focus"">
    <TInputText @bind-Value=""Text"" />
</TTooltip>
```
")
    </CodeContent>
</Example>
@code{
    string Text{ get; set; }
}
<div id="API"></div>

<ComponentAPI Component="typeof(TTooltip)"/>
</LayoutContent>